<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-04-11 21:55:14
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-04-21 10:38:46
 -->
<template>
  <div>
    <div id="placeholder"></div>
  </div>
</template>
<script>
  //import scriptApi from 'http://192.168.43.123/web-apps/apps/api/documents/api.js'
  export default {
    components: {
    },
    created() {
      this.initEditor(this.username, this.docUrl, this.docName, this.titlebarFlag, this.rightPanelFlag, this.leftPanelFlag, this.toobarFlag, this.docKey, this.mode, this.type, this.permission)
    },
    data() {
      return {
        username: "", // 用户名称
        docUrl: "http://sdk.51changxie.com/demo/OEMContract.docx", // 文档所在地址，真实下载地址
        docName: "2020年年报", // 编辑器的标题
        titlebarFlag: true, // 是否显示标题
        rightPanelFlag: false, // 是否打开右边的面板
        leftPanelFlag: false, // 是否打开左边的面板
        toobarFlag: true, // 工具栏面板
        docKey: "947c92fe-a636-47c9-8973-a5c8e14cd20", // 唯一的文档对于key，redis存储使用
        mode: "edit", // 模式
        type: "", // 系统类型
        permission: { // 权限
          "comment": true,
          "download": true,
          "edit": true,
          "print": true,
          "review": true
        }
      };
    },
    methods: {
      initEditor(username, docUrl, docName, titlebarFlag, rightPanelFlag, leftPanelFlag, toobarFlag, docKey, mode, type, permission) {
        //mode for editor
        window.mode = window.mode || mode || "view";
        mode = window.mode;

        //mode for editor
        window.type = window.type || type || "desktop";
        type = window.type;

        //url for document
        // window.docUrl = document.getElementById("documentUrl").value;
        window.docUrl = docUrl;
        //key for chaching and collaborate editing
        window.docKey = docKey;
        // doc name
        window.docName = docName;

        //type for document
        var docType = docUrl.substring(docUrl.lastIndexOf(".") + 1).trim().toLowerCase();
        //type for editor
        var documentType = this.getDocumentType(docType);


        window.permission = permission;
        window.user = username;

        window.user = window.user || "测试"
        var id = window.user + "-4"
        //CXO_API.CXEditor
        //creating object editing
        var onDocumentReady = function () {
          //editor.destroyEditor();

        }
        var onAppReady = function () {

        }

        var editor = new CXO_API.CXEditor("placeholder", {
          type: type,
          width: (type == "desktop" ? "920px" : undefined),
          height: (type == "desktop" ? "517px" : undefined),
          documentType: documentType,
          token: "eyJ0eXBlIjoiMSIsImFsZyI6IkhTNTEyIn0.e30.RgxbmTaMyvL4cYnOg2DH03JghyUeIlLTiFDZrxqM4Ai_8XGv0K1qw0DB2r9EDRmiLb9ROxzzg36J62V-2IvaXA",
          document: {
            title: docName,
            url: docUrl,
            fileType: docType,
            key: docKey + 2,
            permissions: window.permission
          },
          editorConfig: {
            mode: mode,
            user: {
              "id": id,
              "name": window.user
            },
            customization: {
              about: true,
              chat: false,
              comments: true,
              zoom: 50,
              leftMenu: leftPanelFlag,
              rightMenu: rightPanelFlag,
              toolbar: toobarFlag,
              displayTitle: titlebarFlag,
              header: true,
              statusBar: true,
              autosave: false,
              forcesave: false
            },
          },
          events: {
            'onDocumentReady': onDocumentReady,
            'onAppReady': onAppReady
          }
        });
      },
      getDocumentType(ext) {
        if (".doc.docx.docm.dot.dotx.dotm.odt.fodt.ott.rtf.txt.html.htm.mht.pdf.djvu.fb2.epub.xps".indexOf(ext) != -1) return "text";
        if (".xls.xlsx.xlsm.xlt.xltx.xltm.ods.fods.ots.csv".indexOf(ext) != -1) return "spreadsheet";
        if (".pps.ppsx.ppsm.ppt.pptx.pptm.pot.potx.potm.odp.fodp.otp".indexOf(ext) != -1) return "presentation";
        return null;
      },
      key(k) {
        // var result = k.replace(new RegExp("[^0-9-.a-zA-Z_=]", "g"), "_") + (new Date()).getTime();
        var result = k.replace(new RegExp("[^0-9-.a-zA-Z_=]", "g"), "_");
        return result.substring(result.length - Math.min(result.length, 20));
      }
    }
  }
</script>

<style scoped>
  .upload {
    margin-left: 50px;
  }

  .upload-demo {
    margin-top: 50px;
  }
</style>